<template>
	<view>
		<canvas canvas-id="tem" id="tem" class="charts" />
	</view>
</template>

<script>
	import uCharts from '@/uni_modules/qiun-data-charts/js_sdk/u-charts/u-charts.js';
	var uChartsInstance = {};
	export default {
		name: 'tem-canva',
		props: {
			opts: {}
		},
		data() {
			return {
				cWidth: uni.upx2px(750),
				cHeight: uni.upx2px(500)
			};
		},
		watch: {
			opts: {
				handler(newValue, oldValue) {
					this.drawCharts("tem", newValue)
				},
				deep: true
			}
		},
		onReady() {
			this.drawCharts("tem", this.opts)
		},
		methods: {
			drawCharts(id, data) {
				const ctx = uni.createCanvasContext(id, this);
				uChartsInstance[id] = new uCharts({
					type: "gauge",
					context: ctx,
					width: this.cWidth,
					height: this.cHeight,
					categories: [{
						"value": 0.2,
						"color": "#1890ff"
					}, {
						"value": 0.8,
						"color": "#2fc25b"
					}, {
						"value": 1,
						"color": "#f04864"
					}],
					series: data.series,
					animation: true,
					background: "#FFFFFF",
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: undefined,
					title: {
						name: data.title.name,
						fontSize: 25,
						color: "#2fc25b",
						offsetY: 50
					},
					subtitle: {
						name: "温度",
						fontSize: 15,
						color: "#666666",
						offsetY: -50
					},
					extra: {
						gauge: {
							type: "default",
							width: 30,
							labelColor: "#666666",
							startAngle: 0.75,
							endAngle: 0.25,
							startNumber: 0,
							endNumber: 100,
							labelFormat: "",
							splitLine: {
								fixRadius: 0,
								splitNumber: 10,
								width: 30,
								color: "#FFFFFF",
								childNumber: 5,
								childWidth: 12
							},
							pointer: {
								width: 24,
								color: "auto"
							}
						}
					}
				});
			},
		},
	};
</script>

<style scoped>
	.charts {
		width: 750rpx;
		height: 500rpx;
	}
</style>
